import React, { Component } from 'react';
import { Upload ,Button, Icon } from 'antd';
import {inject, observer} from 'mobx-react';

import VideoPlayer from "../components/common/VideoPlayer"

const introduces = [
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/1.png",
    title:"算法新颖",
    desc: "在深度学习基础上结合速度等多模态数据实现智能推断，提高识别对象的识别率。"
  },
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/2.png",
    title:"识别范围广",
    desc: "除了自行车等常见非机动车辆，还可以识别三轮车、电动自行车、电动轻便摩托车等车辆对象。"
  },
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/3.png",
    title:"检测效率高",
    desc: "在实现低延迟神经网络的基础上结合道路交通特点实现快速检测，捕捉快速移动目标，让违法行驶者无所遁形。"
  },
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/4.png",
    title:"业务场景适配",
    desc: "非机动车检测算法可以与越界检测、敏感对象检测等算法进行融合，实现排查占道经营等业务相关处理。"
  },
]

const videoJsOptions = {
  controls: true,
  sources: [{
    src: 'https://vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }]
}

@inject ('FaceRecognitionStore')
@observer
export default class componentName extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    window.scrollTo(0,0)
  }
  
  render() {
    return (
      <div className="yl-ai-body-container">
        <div className="yl-ai-body-banner yl-ai-nonMotorVehicleRecognition">
            <div className="yl-ai-banner-opicity"></div>
            <div className="yl-ai-banner-txt">
                <div className="yl-ai-banner-title">地址抽取</div>
                <div className="yl-ai-banner-desc">能够从12345市民来电长文本中，抽取其中包含的详细地址信息。</div>
            </div>
        </div>

        <div className="yl-ai-body-container">
          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title">产品亮点</div>
            <div className="yl-ai-body-max-width">
            <div className="yl-ai-body-introduces">
            {
              introduces.map((item,key)=> {
                return (
                  <div className="yl-ai-body-introduce">
                    <div className="yl-ai-body-introduce-icon">
                      <img src={item.icon}/>
                    </div>
                    <div className="yl-ai-body-introduce-text">  
                      <div className="yl-ai-body-introduce-title">{item.title}</div>
                      <div className="yl-ai-body-introduce-desc">{item.desc}</div>
                    </div>
                  </div>
                )
              })
            }
        </div>

            </div>
          </div>

          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title have-subtitle">功能演示</div>
            <div className="yl-ai-body-subtitle">**jpg，jpeg，png格式，宽高大于10px小于4000px，保证人物清晰可见。</div>    
            <div className="yl-ai-body-source">
              <div className="camera-button">摄像头采集</div>
              <div className="load-button">上传图片</div>
            </div>  

            <div className="yl-ai-body-max-width">
              <div className="yl-ai-body-test-simple">
                  <div className="yl-ai-body-test-simple-left">
                    <div className="yl-ai-body-text-simple-img-change">
                      <button className="yl-ai-check-button">检测图片</button>
                      <img  src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/HumanRecognitionTracking/testImg.png" alt="" title=""/>
                    </div>
                   
                    <div className="yl-ai-body-text-simple-imgs">
                      <div className="yl-ai-body-text-simple-img">

                        <img title="" alt="" src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/HumanRecognitionTracking/img1.png"/>
                      </div>
                      <div className="yl-ai-body-text-simple-img img-change ">
                      
                      <img title="" alt="" src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/HumanRecognitionTracking/img2.png"/>
                      </div>
                      <div className="yl-ai-body-text-simple-img">
                      <img title="" alt="" src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/HumanRecognitionTracking/img3.png"/>
                      </div>
                    </div>
                  </div>
                  <div className="yl-ai-body-test-simple-right"></div>
              </div>
            </div>
          </div>

          <div className="yl-ai-body-container-panel yl-ai-body-app-scene">
            <div className="yl-ai-body-title">应用场景</div>
            <div className="yl-ai-body-max-width ">
              <div className="yl-ai-humanRecognitionTracking-scene">
                <div className="yl-ai-humanRecognitionTracking-scene-desc">
                    <div className="yl-ai-humanRecognitionTracking-scene-title">智慧园区管理</div>
                    <div className="yl-ai-humanRecognitionTracking-scene-desc">应用于智慧园区管理，根据非机动车特征进行结构化查询。</div>
                </div>
                <div className="yl-ai-humanRecognitionTracking-scene-video">
                  <VideoPlayer { ...videoJsOptions } />
                </div>
              </div>
                
            </div>
          </div>

          <div className="yl-ai-body-container-panel yl-ai-example-panel">
            <div className="yl-ai-body-title">云粒智慧应用案例</div>
            <div className="yl-ai-body-max-width">
            <div className="yl-ai-examples">
                  <div className="yl-ai-example">
                      <div className="yl-ai-example-title title-h2">云鹰·智能视侦平台</div>
                      <div className="yl-ai-example-image">
                        <img src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/NonMotorVehicleRecognition/exampleImg.png" alt="" title=""/>
                      </div>
                  </div>
            </div>
            </div>
          </div>
        </div>

      </div>
    )
  }
}
